import { Table, Popconfirm, Button } from 'antd';
import React from 'react';
import { observer, Observer } from 'mobx-react';

const ProductList: React.FC<{
  products: { name: string }[];
  onDelete: (id: string) => void;
}> = ({ products, onDelete }) => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Actions',
      render: (text: any, record: any) => {
        return (
          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        );
      },
    },
  ];
  return (
    <Table
      dataSource={products}
      columns={columns}
      rowKey="name"
      data-={products.length}
    />
  );
  // return <Observer>
  //   {() => <Table dataSource={products} columns={columns} rowKey="name" />}
  // </Observer >
};

export default observer(ProductList);
